<template>
    <el-row class="tac">
        <el-col class="col" :span="24" >
            <div class="logo">
                <span >坑你一点购物</span>
            </div>
            <el-menu
                    active-text-color="#ffd04b"
                    background-color="#545c64"
                    class="el-menu-vertical-demo"
                    :default-active="this.$route.path"
                    text-color="#fff">
                <el-menu-item index="/menu/index" @click="to('/menu/index')">
                    <el-icon><Flag/></el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-menu-item index="/menu/shopping" @click="to('/menu/shopping')">
                    <el-icon><ShoppingCartFull /></el-icon>
                    <span>购物</span>
                </el-menu-item>
                <el-menu-item index="/menu/userInfo" @click="to('/menu/userInfo')">
                    <el-icon><document /></el-icon>
                    <span>信息</span>
                </el-menu-item>
                <el-menu-item index="/menu/logOff" @click="to('/menu/logOff')">
                    <el-icon><setting /></el-icon>
                    <span>注销</span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "menu-item",
        data(){
            return{
                input:''
            }
        },
        methods:{
            to(val){
                this.$emit('jump',val);
            }
        }
    }
</script>

<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 100%;
    }
    .logo{
        align-items: center;
        height: 60px;
        width: 100%;
        background-color: #969696;
    }
    .logo span{
        font-size: 1.5em;
        text-align: center;
        width: 100%;
        height: 100%;
        color: #E9EEF3;
        line-height: 60px;
    }

</style>
